<script setup>


import {onMounted, ref} from "vue";
import axios from "axios";
import {ElMessage} from "element-plus";
import { useRouter } from "vue-router";
import {userStore} from '@/store/index.js'

const store = userStore();
const router = useRouter()

const cartItems = ref([]);
const cart = ref({})

// 查询显示购物车
const showAll = () => {
   axios.get('/cart').then(res=>{
     cart.value = res.data
     // 购物项
     cartItems.value = res.data.itemList;
   }).catch(error=>{
       let code = res.response.status;
       if (code === 401 || code === 403) {
         ElMessage.error("请先登录，再访问购物车");
         //更新Pinia
         store.updateUser( null);
         store.updateLoginStatus(false);
         //跳转到登录页面
         router.push("/login");
       }
   })
}

// 跳转到主页
const goShopping = () => {
  router.push('/');
}

onMounted(()=>{
  showAll();
})

// 跳转到结算页面
const settleAccounts = () => {
  router.push('/settlement');
}

</script>


<template>
  <el-card class="shopping-cart">
    <template v-if="cartItems.length > 0">
      <!-- 显示购物车项表格 -->
      <el-table :data="cartItems" style="width: 100%"
                stripe highlight-current-row class="cart-table">
        <el-table-column type="index" width="55" label="序号">
          <template #default="{ $index }">
            {{ $index + 1 }}
          </template>
        </el-table-column>
        <el-table-column prop="name" label="书名">
          <template #default="{ row }">
            《{{ row.name }}》
          </template>
        </el-table-column>

        <el-table-column prop="image" label="图片">
          <template #default="{ row }">
            <el-image style="height: 120px;"
                      :src="$urlImage + row.image"
                      fit="fit">
            </el-image>
          </template>
        </el-table-column>

        <el-table-column prop="price" label="单价">
          <template #default="{row}">
            &yen; {{ row.price.toFixed(2) }}
          </template>
        </el-table-column>

        <el-table-column prop="quantity" label="数量">
          <template #default="{row}">
            <el-input-number
                v-model="row.quantity"
                @change="handleChange(row)"
                :min="1"
                :max="99"
                size="small"
                style="width: 110px;">
            </el-input-number>
          </template>
        </el-table-column>

        <el-table-column prop="sum" label="金额">
          <template #default="{row}">
            &yen; {{ row.sum.toFixed(2) }}
          </template>
        </el-table-column>

        <el-table-column label="操作" width="150">
          <template #default="{row}">
            <el-button type="text"
                       @click="handleDelete(row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!--  购物车下面部分 -->
      <div class="cart-footer">
        <el-button icon="el-icon-soccer"
                   style="float: left;" @click="handleClear">
          清空购物车</el-button>
        <span>共有<span class="cart-number">
                    {{ cart.amount }}</span>本书</span>
        <span>合计：
                    <span style="color: red; font-size: 25px;">
                   &yen; {{cart.totalPrice ? cart.totalPrice.toFixed(2) : 0}}</span>
                </span>
        <el-button type="success"
                   icon="el-icon-s-shop"
                   @click="settleAccounts">结算</el-button>
      </div>
    </template>

    <!-- 没有内容的显示 -->
    <template v-else>
      <div class="cart-empty">
        <el-empty description="购物车是空的"></el-empty>
        <el-button type="primary" style="width: 150px" @click="goShopping">
          去购物
        </el-button>
      </div>
    </template>
  </el-card>
</template>

<style scoped>

.shopping-cart {
  margin: 15px;
  border-radius: 10px;
}

.cart-table {
  border-radius: 10px;
}

.cart-footer {
  margin-top: 10px;
  text-align: right;
}

/* 所有的子元素 */
.cart-footer > * {
  margin: 10px;
}

.cart-number {
  color: red;
  font-size: 22px;
}

.cart-empty {
  text-align: center;
}
</style>
